<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>10像素值</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="625">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		// 3, 加载图片
		// 创建 img对象
		var imgObj = new Image();
		// 设置 src
		imgObj.src = "img/banner3.png";
		// 图片加载完毕
		imgObj.onload = function() {
			// 图片绘制到 canvas: drawImage()
			context.drawImage(imgObj, 0, 0, 1280, 800, 0, 0, 1000, 625);
			/*
			 * 像素值
			 */
			/*
			 * 获取像素值: getImageData(x, y, w, h)
			 * 四个参数:
			 * 		x 和 y		要获取矩形区域的位置
			 * 		w 和 h		要获取矩形区域的大小
			 * 
			 * 返回值: ImageData 类型的对象, 该对象中存储了三个属性, 分别是:
			 * 		width	截取区域的宽度
			 * 		height	截取区域的高度
			 * 		data		截取区域每个点的像素值, 该属性值是一个数组, 数组中的每四项构成一个像素点的r, g, b, a值
			 */
			var imageData = context.getImageData(110, 110, 100, 100);
			console.log(imageData);
			console.log(imageData.data);
			
			
			/*
			 * 从零绘制像素: createImageData(ImageData/w, h)
			 * 两种类型的参数
			 * 	类型一: ImageData 类型的对象
			 * 	类型二: w 和 h, 即 宽和高
			 * 
			 * 注: 类型一时, 即时 ImageData对象 中的data数组有具体颜色值, 该方法也不理会, 只是简单提取了 ImageData对象 的 宽 和 高来使用而已.
			 */
			var creatImgData = context.createImageData(imageData);
			console.log(creatImgData);
			console.log(creatImgData.data);
			var pixels = creatImgData.data;
			var num = creatImgData.width * creatImgData.height;
			for(var i = 0; i < num; i++) {
				pixels[i * 4 + 0] = 255;
				pixels[i * 4 + 1] = 0;
				pixels[i * 4 + 2] = 0;
				pixels[i * 4 + 3] = 255;
			}
			
			/*
			 * 绘制像素到画布: putImageData()
			 * 两种参数类型:
			 * 类型一: 三个参数 --- ImageData, x, y
			 * 		ImageData 要绘制的ImageData对象
			 * 		x 和 y	  要绘制在canvas上的位置
			 * 
			 * 类型二: 七个参数 --- ImageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH
			 * 		ImageData 		要绘制的ImageData对象
			 * 		x 和 y	  		要绘制在canvas上的位置
			 * 		dirtyX和dirtyY	要截取的位置(脏矩形的左上角点的坐标)
			 * 		dirtyW和dirtyH	要截取的大小(脏矩形的大小)
			 * 脏矩形的作用: 定义 ImageData对象中 需要绘制的像素
			 */
			// 用法一:
			context.putImageData(creatImgData, 0, 0);
			// 用法二:
			context.putImageData(creatImgData, 500, 0, 0, 0, 50, 50);
			
			
		}
		
		
		
	</script>
</html>
